<template>
    <div class="header-page">
        <div class="left-box">{{ title }}</div>
        <div class="right-box">
            <el-dropdown placement="bottom-end" @command="handleCommand" popper-class="header-dropdown-menu">
                <span class="el-dropdown-link">
                    <el-avatar class="user-avatar" :size="32" :src="profilePicture" />
                    <div class="user-name">{{ userStore.state.userInfo.nickName }}</div>
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu >
                        <el-dropdown-item v-for="(item, index) in dropdownList" :key="index" :command="item.command">{{
                            item.lable }}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <EditPassword  ref="RoleMenuRef" v-model:dialogFrom="roleMenuDialogFrom" />
        <ChangeTheme ref="ChangeThemeRef" v-model:draweFrom="changeThemeDraweFrom"></ChangeTheme>
    </div>
</template>
<script lang="ts" setup>
import { ref,onMounted,watch } from "vue";
import userStore from "@/store/user";
import router from "@/router";
import { logout } from "@/api/login";
import EditPassword,{type DialogFrom as EditPasswordDialogFrom} from "@/components/user/EditPassword.vue";
import ChangeTheme, {type DrawerFrom} from "@/components/home/componts/ChangeTheme.vue";
defineProps({
    title: {
        type: String,
        default: "",
    },
});

const profilePicture = ref('')

const roleMenuDialogFrom = ref<EditPasswordDialogFrom>({
    dialogTitle: '修改密码',
    dialogVisible: false,
})

const changeThemeDraweFrom = ref<DrawerFrom>({
    drawerVisible: false
})

onMounted (() => {
    userStore.commit('SET_USER_INFO')
    profilePicture.value = process.env.VUE_APP_BASE_API + userStore.state.userInfo.profilePicture
})

watch(() => userStore.state.userInfo.profilePicture, (newValue, oldValue) => {
    if (newValue) {
       profilePicture.value =  newValue ? process.env.VUE_APP_BASE_API + newValue : require("@/assets/images/avatar.png");
    }
})

const handleCommand = (command: string) => {
    const dropdown = dropdownList.value.find((item: DropdownItem) => item.command == command);
    dropdown?.onclick?.();
};

const toPath = (path: string) => {
    router.push(path);
};

const editPassword = () => {
    roleMenuDialogFrom.value.dialogVisible = true
}

const changeTheme = () => {
   changeThemeDraweFrom.value.drawerVisible = true
};

const handleLogout = () => {
    logout().then(() => {
        router.push("/login");
    });
};

interface DropdownItem {
    lable: string;
    command: string;
    onclick: () => void;
}



const dropdownList = ref<DropdownItem[]>([
    {
        lable: "用户信息",
        command: "userInfo",
        onclick: () => toPath("/userInfo"),
    },
    {
        lable: "修改密码",
        command: "editPassword",
        onclick: () => editPassword(),
    },
    {
        lable: "修改主题",
        command: "changeTheme",
        onclick: () => changeTheme(),
    },
    {
        lable: "退出登录",
        command: "Logout",
        onclick: () => handleLogout(),
    },
]);
</script>
<style lang="scss" scoped>
.header-page {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;

    .left-box {
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 24px;
        font-weight: bold;
        color: var(--header-title-text-color);
    }

    .right-box {
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: bold;
        margin-right: 20px;

        .el-dropdown-link {
            cursor: pointer;
            display: flex;
            align-items: center;
            font-size: 16px;

            .user-avatar {
                margin-right: 10px;
                color: var(--header-title-text-color);
            }

            .user-name{
                margin-right: 10px;
                color: var(--header-title-text-color);
            }

            .el-icon--right{
                color: var(--header-title-text-color);
            }
        }
    }
}
</style>
